<template>
    <div class="f_div">
      <div class="t_div">运营管理 / <a href="#">到站</a></div>
      <el-container>
  
        <el-header class="header2">
          <div class="h_div">
            <div class="h_in_vid">
              <el-form ref="form" :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="始发地：">
                  <el-input v-model="value" placeholder="请输入始发地"></el-input>
                </el-form-item>
                <el-form-item label="目的地：">
                  <el-input v-model="value1" placeholder="请输入目的地"></el-input>
                </el-form-item>
                <el-form-item label="到站日期：">
                  <el-date-picker v-model="value2" type="datetimerange" range-separator="To"
                    start-placeholder="请选择日期" end-placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="搜索：">
              <el-input v-model="value3" placeholder="请输入关键字搜索"></el-input>
            </el-form-item>
            <el-form-item style="float:left">
              <el-button type="primary" @click="tjian">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
  
  
              </el-form>
            </div>
          </div>
        </el-header>
        <el-main class="main">
          <el-table height="442px" :data="tableData" style="width: 100%" row-key="depart_id" default-expand-all stripe
            :header-cell-style="{
                background: '#F7F7F7',
                color: '#999',
                textAlign: 'center',
              }" :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="bill_Id" label="提货单" width="150"></el-table-column>
            <el-table-column prop="wb_number" label="运单号" width="150"></el-table-column>
            <el-table-column prop="order_Id" label="订单号" width="150"></el-table-column>
            <el-table-column prop="customer" label="客户" width="150"></el-table-column>
            <el-table-column prop="origin_place" label="始发地" width="170"></el-table-column>
            <el-table-column prop="det_place" label="目的地" width="170"></el-table-column>
            <el-table-column prop="is_arrival" label="是否到站" width="100">
                <template #default="scope">
              <span>{{ formatOrderState(scope.row.is_arrival) }}</span>
            </template>
            </el-table-column>
            <el-table-column prop="pickup_address" label="发货地址" width="200"></el-table-column>
            <el-table-column prop="delivery_address" label="收货地址" width="200"></el-table-column>
            <el-table-column prop="driver_name" label="司机" width="100"></el-table-column>
            <el-table-column prop="car_number" label="车牌号" width="100"></el-table-column>
            <el-table-column prop="driver_phone" label="手机号码" width="120"></el-table-column>
            <el-table-column prop="bill_nums" label="提货数量" width="120"></el-table-column>
            <el-table-column prop="bill_volume" label="提货体积" width="120"></el-table-column>
            <el-table-column prop="bill_weight" label="提货重量" width="120"></el-table-column>
            <el-table-column prop="bill_cost" label="提货运费合计" width="120"></el-table-column>
            <el-table-column prop="pickup_time" label="提货开始时间" width="170"></el-table-column>
            <el-table-column prop="pickup_endtime" label="提货完成时间" width="170"></el-table-column>
            <el-table-column prop="plan_time" label="计划发车时间" width="170"></el-table-column>
            <el-table-column prop="reality_time" label="实际发车时间" width="170"></el-table-column>
            <el-table-column prop="planGet_time" label="计划到达时间" width="170"></el-table-column>
            <el-table-column prop="realityGet_time" label="实际到达时间" width="170"></el-table-column>
            <el-table-column prop="create_by" label="创建人" width="120"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="170"></el-table-column>
            <el-table-column label="操作" width="220px">
              <template #default="scoped">
                <el-button type="text" size="small" @click="DD(scoped.row.arrival_Id)">订单到站</el-button>
                <el-button type="text" size="small" @click="ZC(scoped.row.wb_number)">整车到站</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 6, 8, 10]"
              :size="size" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  import { ref, reactive, resolveComponent, onMounted } from "vue";
  import axios from "axios";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import $http from '@/axios/base.js';
  
  
  export default {
    setup() {
      let tableData = ref([]);
      let value = ref("");
      let value1 = ref("");
      let value2 = ref("");
      let value3 = ref("");
      let currentPage = ref("1");
      let pageSize = ref("10");
  
  
      let router = useRouter();
  
      function ZC(wb_number) {
          $http
          .put(`http://localhost:5261/api/Arrival_meter/ZCArrival/${wb_number}`)
          .then((res) => {
            if (res) {
              location.reload();
              setTimeout(() => {
                ElMessage.success("整车到站完成");
              }, 1000);
            } else {
              ElMessage.error("异常错误！");
            }
          })
          .catch((err) => console.log(err));
      }
  
      function formatOrderState(status) {
      switch (status) {
        case 0:
          return '未到站';
        case 1:
          return '已到站';
      }
    }
  
    
  
      function show() {
        $http.get(`http://localhost:5261/api/Arrival_meter/GetArrival_meters/${currentPage.value},${pageSize.value}`)
          .then((res) => {
            tableData.value = res;
            res.forEach((item, index) => {
                getBill_ol(item.billol_Id, index)
            });
            console.log(tableData.value);
            console.log("---------------");
          })
          .catch((err) => console.log(err));
      }

      const getBill_ol = (id, index) => {
        $http.get(`http://localhost:5261/api/Arrival_meter/GetBillId/${id}`)
        .then((res) => {
            Object.assign(tableData.value[index], res);
            console.log(tableData.value[index]);
            tableData.value[index].pickup_time = new Date(tableData.value[index].pickup_time).toISOString().slice(0, 10).toString();
            tableData.value[index].plan_time = new Date(tableData.value[index].plan_time).toISOString().slice(0, 10).toString();
            tableData.value[index].reality_time = new Date(tableData.value[index].reality_time).toISOString().slice(0, 10).toString();
            tableData.value[index].planGet_time = new Date(tableData.value[index].planGet_time).toISOString().slice(0, 10).toString();
            tableData.value[index].realityGet_time = new Date(tableData.value[index].realityGet_time).toISOString().slice(0, 10).toString();
            tableData.value[index].create_time = new Date(tableData.value[index].create_time).toISOString().slice(0, 10).toString();
        })
        .catch((err) => console.log(err))
      }
  
      onMounted(() => {
        show();
      });
  
      function tjian() {
        $http.get(`http://localhost:5261/api/Arrival_meter/Arrival_condition/${currentPage.value},${pageSize.value}?Origin_place=${value.value}&Det_place=${value1.value}&RealityGet_time=${value2.value}&value2=${value3.value}`)
        .then((res) => {
          tableData.value = res;
          console.log(res);
          console.log("=======");
          res.forEach((item, index) => {
            console.log(item.billol_Id);
                getBill_ol(item.billol_Id, index)
            });
          ArricalCount();
        })
        .catch((err) => console.log(err));
      }
  
      function ArricalCount() {
      $http.get(`http://localhost:5261/api/Arrival_meter/Count?RealityGet_time=${value2.value}&value2=${value1.value}`).then((res) => {
        // count.value = res;
        // console.log(count.value);
      }).catch((err) => {
        console.log("错误：" + err);
      })
    }
    ArricalCount();
  
      const searchForm = reactive({
        level: "1",
        dateRange: "",
        keyword: "",
      });
  
      let currentRow = ref(null);
  
  
      function handleSearch() {
        console.log(searchForm);
      }
  
      function handleReset() {
        // 重置表单
        searchForm.level = "";
        searchForm.dateRange = "";
        searchForm.keyword = "";
        // 重置表格数据
        // ...
      }
  
      function handlePageChange(val) {
        currentPage.value = val;
      }
  
  
      function DD(arrival_id) {
        console.log(arrival_id);
        $http.put(`http://localhost:5261/api/Arrival_meter/DDArrival/${arrival_id}`)
          .then((res) => {
            if (res) {
              location.reload();
              setTimeout(() => {
                ElMessage.success("订单到站完成");
              }, 1000);
            } else {
              ElMessage.error("异常错误！");
            }
          })
          .catch((err) => console.log(err));
      }
  
  
  
  
  
      return {
        value,
        value1,
        value2,
        value3,
        tableData,
        searchForm,
        currentPage,
        pageSize,
        handleSearch,
        handleReset,
        handlePageChange,
        DD,
        //deleteCustomer,
        currentRow,
        show,
        tjian,
        ZC,
        formatOrderState,
        ArricalCount
      };
    },
  };
  </script>
  
  <style scoped>
  .pagination-container {
    display: flex;
    justify-content: right;
    margin-top: 20px;
  }
  
  .t_div {
    margin-bottom: 20px;
    text-align: left;
    font-size: 14px;
    color: #b3b4b6;
  }
  
  a {
    text-decoration: none;
  }
  
  .f_div {
    padding: 0px 50px;
  }
  
  .h_div {
    height: 39px;
  }
  
  .h_in_vid {
    width: 1400px;
    height: 20px;
    margin-top: 20px;
    display: flex;
  }
  
  .header {
    background-color: #ffffff;
    border-radius: 10px 10px 0px 0px;
  }
  
  .header2 {
    background-color: #ffffff;
  }
  
  .main {
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
    height: 650px;
  }
  .el-header{
    height: 100px;
  }
  </style>